/*
使用方式：
// 写在调用页面中
onShow: function () {
    this.selectComponent('#music-component').onShow()
},
onHide: function () {
    this.selectComponent('#music-component').onHide()
}

参考：http://www.wxapp-union.com/article-4402-1.html

* */


Component({
    properties: {
        // 音乐路径
        music: {
            type: String,
            value: 'https://jadekind.shenjiyan.com/storage/file/2019-08/c96b0aa6c69251142e305c75b7fde16f.mp3',
            observer: function (newVal) {
                this._initMusic(newVal)
            }
        },
        // 样式
        musicStyle: {
            type: String,
            value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;'
        },
        // 播放时是否有旋转效果
        rotate: {
            type: Boolean,
            value: true
        },
        // 播放时的icon路径
        iconOn: {
            type: String,
            value: 'play.png' // 请填写默认的图片地址
        },
        // 暂停时的icon路径
        iconOff: {
            type: String,
            value: 'play2.png' // 请填写默认的图片地址
        }
    },

    data: {
        icon: '',
        audioStatus: 1,
        audioCtx: '',
        musicClass: 'music-on'
    },

    ready() {
        this.setData({
            icon: this.data.iconOn
        })
        // this._initMusic("https://jadekind.shenjiyan.com/storage/file/2019-08/c96b0aa6c69251142e305c75b7fde16f.mp3")
    },

    // 页面关闭时销毁音乐
    detached() {
        this.onHide()
    },

    methods: {
        _initMusic: function (newVal) {
            // 当页面传来新的music时，先销毁之前的audioCtx，否则页面会很嗨
            if (this.data.audioCtx) {
                this.data.audioCtx.destroy()
            }
            if (newVal) {
                var audioCtx = wx.createInnerAudioContext()
                this.setData({
                    audioCtx: audioCtx
                })
                if (this.data.audioStatus == '1') {
                    audioCtx.autoplay = true
                }
                audioCtx.loop = true;
                audioCtx.src = newVal
            }
        },

        _switch: function () {
            // // 如果是播放就停止
            // if (this.data.audioStatus) {
            //     this.setData({
            //         audioStatus: 0,
            //         icon: this.data.iconOff,
            //         musicClass: ''
            //     });
            //     this.data.audioCtx.pause()
            //     // 如果是停止就播放
            // } else {
            //     this.setData({
            //         audioStatus: 1,
            //         icon: this.data.iconOn,
            //         musicClass: 'music-on'
            //     });
            //     this.data.audioCtx.play()
            // }
        },

        // 写在组件的methods中：
        // 在引用组件页面的onShow()中调用
        //  否则，如果当发生分享页面行为并返回时，音乐不会自动播放
        onShow: function () {
            if (this.data.music && this.data.audioStatus) {
                this.data.audioCtx.play()
            }
        },
        // 在引用组件页面的onHide()中调用
        //  否则，在跳转到下一个页面后，音乐还在继续
        onHide: function () {
            if (this.data.music && this.data.audioStatus) {
                this.data.audioCtx.pause()
            }
            this.setData({
                animationData: {}
            })
        }
    }
});
